<template>
  <div class="back-container">
    <div
      :class="{
        backTop: true,
        backHide: backChoose,
        backActive: !backChoose,
      }"
      @click="handleBackTop"
    ></div>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
const props = defineProps({
  isHome: {
    type: Boolean,
    default: true,
  },
});
let backChoose = ref(true);
//监听页面滚动位置
window.addEventListener("scroll", () => {
  if (props.isHome)
    document.documentElement.clientHeight <= document.documentElement.scrollTop
      ? (backChoose.value = false)
      : (backChoose.value = true);
  else
    document.documentElement.scrollTop >= 700
      ? (backChoose.value = false)
      : (backChoose.value = true);
});

const handleBackTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};
</script>

<style scoped lang="less">
.backTop {
  position: fixed;
  cursor: pointer;
  right: 30px;
  top: 0;
  z-index: 998;
  width: 70px;
  height: 900px;
  transition: all 0.6s;
  background: url("")
    no-repeat;
}
.backHide {
  transform: translateY(-100%);
}
.backActive {
  transform: translateY(-35%);
}
</style>
